<!-- 赠送黑贝壳 -->
<template>
	<view class="container">
		<view class="label rule" @tap="goRule(11,'贝壳赠送规则')">赠送规则</view>
		<view class="label detail" @tap="goDetail">赠送明细</view>
		<view class="nowShell">
			<view>
				<image src="../../../static/images/public/shellIcon.png" mode=""></image>
				<text>{{shellNum}}</text>
			</view>
			<text>当前拥有黑贝壳</text>
		</view>
		<view class="inputBox">
			<text class="phone" :animation="animationData1">对方手机号</text>
			<input type="number" maxlength="11" v-model="phone" placeholder-style="font-size:30rpx" placeholder="请输入对方手机号码"/>
		</view>
		<view class="rules">
			<image @tap="ruleCheck" v-if="ruleChecked" src="../../../static/images/public/select.png" mode=""></image>
			<view @tap="ruleCheck" class="gray" v-else></view>
			<view class="text"><text>同意</text><text @tap="goRules(16,'贝壳赠送协议')">《贝壳赠送协议》</text></view>
		</view>
		<button @tap="active&&sub()" :class="active?'active':''" class="sub" type="default">下一步</button>
	</view>
</template>

<script>
	import {giftShell} from "@/api/shell.js"
	export default {
		data() {
			return {
				ruleChecked: true,
				shellNum: "",
				phone: null,
				active: false,
				animationData1: {}
			};
		},
		onShow() {
			this.shellNum = uni.getStorageSync("userInfo").shellCount.list[0].count
			var animation = uni.createAnimation({
				duration: 200,
				timingFunction: 'ease',
			})
			this.animation = animation
		},
		watch: {
			phone: {
				deep: true,
				handler(val, oldval) {
					this.blur();
				}
			}
		},
		methods: {
			ruleCheck() {
				this.ruleChecked = !this.ruleChecked
			},
			blur() {
				if (this.phone) {
					this.active = true
					this.animation.opacity(1).step()
					this.animationData1 = this.animation.export()
				} else {
					this.active = false
					this.animation.opacity(0).step()
					this.animationData1 = this.animation.export()
				}
			},
			goRule(id,name){
				uni.navigateTo({
					url:`/pages/center/help/rulesDetail?id=${id}&tit=${name}`
				})
			},
			goRules(id,name){
				uni.navigateTo({
					url:`/pages/center/help/rulesDetail?id=${id}&tit=${name}`
				})
			},
			goDetail(){
				uni.navigateTo({
					url: "./detail"
				})
			},
			sub() {
				if(!this.ruleChecked) {
					uni.showToast({
						icon:"none",
						title:"请同意《贝壳赠送协议》"
					})
					return
				}
				let _this = this
				uni.showModal({
					content:"确认赠送？",
					confirmColor:"#57BE6A",
					success(res) {
						uni.showLoading({
							mask:true
						})
						giftShell({
							phone:_this.phone,
							step: 1
						}).then(res => {
							uni.hideLoading()
							uni.navigateTo({
								url: `./number?phone=${_this.phone}&msg=${res.msg}`
							})
						})
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		position: relative;

		.label {
			position: absolute;
			top: 20rpx;
			width:140rpx;
			height:62rpx;
			line-height: 62rpx;
			color: #fff;
			font-size:24rpx;
			font-weight:bold;
			text-align: center;
			background:$theme-color;
			border-radius:31rpx;
		}

		.rule {
			left: 30rpx;
		}

		.detail {
			right: 30rpx;
		}
		.nowShell{
			padding-top: 200rpx;
			view{
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 60rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
				text{
					font-size:50rpx;
					font-weight:bold;
					color:rgba(51,51,51,1);
				}
			}
			>text{
				display: block;
				text-align: center;
				margin-top: 14rpx;
				font-size:26rpx;
				font-weight:400;
				color:rgba(51,51,51,1);
			}
		}
		.inputBox{
			padding: 150rpx 78rpx 0;
			.phone{
				opacity: 0;
				font-size:28rpx;
				font-weight:400;
				color:rgba(153,153,153,1);
			}
			input{
				margin-top: 10rpx;
				border-bottom: 1rpx solid #eee;
				font-size:40rpx;
				font-weight:400;
				color:rgba(51,51,51,1);
				line-height: 30rpx;
			}
		}
		.sub{
			margin: 50rpx auto 0;
			width:600rpx;
			color: #fff;
			height:80rpx;
			line-height:80rpx;
			background:rgba(220, 220, 220, 1);
			border-radius:40rpx;
			font-size:32rpx;
			font-weight:bold;
		}
		.active{
			background: $theme-color;
		}
		.rules {
			margin-top: 200rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		
			image {
				margin-right: 14rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 20rpx;
			}
		
			.gray {
				margin-right: 14rpx;
				box-sizing: border-box;
				border: 2rpx #999 solid;
				width: 40rpx;
				height: 40rpx;
				border-radius: 20rpx;
			}
		
			.text {
				font-size: 24rpx;
				color: #333;
		
				text:nth-of-type(2) {
					color: $theme-color;
				}
			}
		}
	}
</style>
